import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, Image} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {bindActionCreators} from "redux";
import {detailActions} from '../../actions/detail'
import {formatDate} from '../../utils/format'

import navigation_png from '../../assets/imgs/navigation.png'

import './index.scss'

import apply_statistic_png from '../../assets/imgs/apply_statistic.png'
import invite_png from '../../assets/imgs/invite.png'
import import_png from '../../assets/imgs/import.png'
import setting_png from '../../assets/imgs/settings.png'
import register_statistic_png from  '../../assets/imgs/register_statistic.png'
import register_qr_code_png from '../../assets/imgs/register_qr_code.png'
import computer_png from '../../assets/imgs/computer.png'

class Detail extends Component {

    config = {
        navigationBarTitleText: '课程详情'
    }

    componentWillMount() {
        const id = this.$router.params.id
        this.props.setCurrentDetail(id)
    }

    render() {
        const course = this.props.currentDetail
        return (
            course && <View className='detail'>
                <View>
                    {/* TODO 发布前取消默认banner图（或者不去除？） */}
                    <Image className='banner' src={course.banner_url}/>
                </View>

                <View className='content'>
                    <View className='at-row at-row--wrap'>
                        <View className='at-col at-col-8 at-col--wrap'>
                            <View className='title'>{course.title}</View>
                            <View className='text-small'>{course.address}</View>
                            <View className='text-small'>{formatDate(course.start_time)}</View>
                        </View>
                        <View className='at-col at-col-4 navigation-box'>
                            <Image className='navigation' src={navigation_png}/>
                        </View>
                    </View>

                    <View className='line'></View>

                    <View className='at-row at-row--wrap'>
                        <View className='at-col at-col-3'>
                            <Button className='tool-button' hover-class='btn_hover'>
                                <Image src={apply_statistic_png} className='tool-button-icon'/>
                                报名统计</Button>
                        </View>
                        <View className='at-col at-col-3'>
                            <Button className='tool-button' hover-class='btn_hover'>
                                <Image src={invite_png}
                                       className='tool-button-icon'/>邀请报名</Button>
                        </View>
                        <View className='at-col at-col-3'>
                            <Button className='tool-button' hover-class='btn_hover'>
                                <Image src={import_png}
                                       className='tool-button-icon'/>导入邀请</Button>
                        </View>
                        <View className='at-col at-col-3'>
                            <Button className='tool-button' hover-class='btn_hover'>
                                <Image src={setting_png}
                                       className='tool-button-icon'/>修改活动</Button>
                        </View>
                        <View className='at-col at-col-3 white-space'>
                            <Button className='tool-button' hover-class='btn_hover'>
                                <Image src={register_statistic_png}
                                       className='tool-button-icon'/>签到统计</Button>
                        </View>
                        <View className='at-col at-col-3 white-space'>
                            <Button className='tool-button' hover-class='btn_hover'>
                                <Image src={register_qr_code_png}
                                       className='tool-button-icon'/>签到二维码</Button>
                        </View>
                        <View className='at-col at-col-3 white-space'>
                            <Button className='tool-button' hover-class='btn_hover'>
                                <Image src={computer_png}
                                       className='tool-button-icon'/>访问网页</Button>
                        </View>
                    </View>

                    <View className='line'></View>

                    <View className='introduction'>
                        <View className='title'>活动介绍</View>
                        <View className='text-small'>
                            {course.description}
                        </View>
                    </View>

                    <View className='line'></View>

                    <View className='agenda'>
                        <View className='title'>议程</View>
                        <View className='text-small' style='white-space: pre-wrap;'>
                            {course.event_agenda}
                        </View>
                    </View>

                    <View className='line'></View>

                    <View>
                        <Image className='event_img' src={course.event_img_url}/>
                    </View>

                    <View className='footer'></View>

                </View>
            </View>
        )
    }
}

const mapStateToProps = ({courseList}) => {
    return {
        currentDetail: courseList.currentDetail
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        ...bindActionCreators(detailActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Detail)
